import React, { useState } from 'react'
import { Arrow, Like, Star } from '@react-vant/icons'
import { Card, Image, Button, Toast, Space } from 'react-vant'
import { API_BASE } from "./service";
import { useNavigate } from 'react-router-dom';

export default ({ dish, onLike, onCollect }) => {
  const navigate = useNavigate();
  return (
    <>
      <Card round style={{ marginBottom: 20 }}>
        <Card.Cover onClick={() => navigate(`/dish/${dish?.id}`)}>
          <Image src={`${API_BASE}${dish?.imgUrl}`} />
        </Card.Cover>
        <Card.Header
          onClick={() => navigate(`/dish/${dish?.id}`)}
        >
          {dish?.name}
        </Card.Header>
        <Card.Footer>
          <Space>
            <Button
              icon={<Star />}
              round
              type={dish?.myCollectionState ? "primary" : ""}
              onClick={() => {
                onCollect(dish?.id);
              }}
              size='small'>
              收藏{dish?.collectionCount}
            </Button>
            <Button
              icon={<Like />}
              round
              color={dish?.myLikeState ? 'linear-gradient(to right, #ff6034, #ee0a24)' : ""}
              size='small'
              onClick={() => {
                onLike(dish?.id);
              }}
            >
              Like {dish?.likeCount}
            </Button>
          </Space>
        </Card.Footer>
      </Card>
    </>
  )
}
